<!DOCTYPE html>
<html lang="en">
<head>
    {include file="_Fragment/meta" /}
    <link rel="stylesheet" href="/static/pear/component/pear/css/pear.css" />
</head>
<body class="pear-container">

<div class="layui-card">
    <div class="layui-card-body">
        <table id="power-table" lay-filter="power-table"></table>
    </div>
</div>

<script type="text/html" id="power-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
        <i class="layui-icon layui-icon-spread-left"></i>
        展开
    </button>
    <button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
        <i class="layui-icon layui-icon-shrink-right"></i>
        折叠
    </button>
</script>

<script type="text/html" id="power-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>

<script type="text/html" id="power-type">
    {{#if (d.powerType == '0') { }}
    <span>目录</span>
    {{# }else if(d.powerType == '1'){ }}
    <span>菜单</span>
    {{# }else if(d.powerType == '2'){ }}
    <span>按钮</span>
    {{# } }}
</script>

<script type="text/html" id="power-enable">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="icon">
    <i class="layui-icon {{d.icon}}"></i>
</script>

{include file="_Fragment/javascript" /}
<script>
    layui.use(['table','form','jquery','treetable'],function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let treetable = layui.treetable;

        treetable.render({
            treeColIndex: 1,
            treeSpid: 0,
            treeIdName: 'id',
            treePidName: 'menu_id',
            skin:'line',
            treeDefaultClose: true,
            toolbar:'#power-toolbar',
            defaultToolbar: [{
                layEvent: 'reload',
                icon: 'layui-icon-refresh',
            }, 'filter'],
            elem: '#power-table',
            url: '/Menu/getMenu',
            page: false,
            cols: [
                [
                    {type: 'checkbox'},

                    {field: 'title', minWidth: 200, title: '节点名称', align: 'center'},
                    {field: 'id', title: 'ID', align: 'center'},
                    {field: 'icon', title: '图标', templet:'#icon', align: 'center'},
                    {field: 'powerType', title: '节点类型', templet:'#power-type', align: 'center'},
                    {field: 'status', title: '是否可用',templet:'#power-enable', align: 'center'},
                    {field: 'sort', title: '排序', align: 'center', edit:'text'},
                    {title: '操作',templet: '#power-bar', width: 150, align: 'center'}
                ]
            ]
        });

        table.on('tool(power-table)',function(obj){
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        })

        //监听推荐操作
        form.on('switch(user-enable)', function(obj) {
            $.post("{:url('toggle')}", {id: this.value}, function (result) {
                if(result.status != 0) {
                    layer.tips(result.msg, obj.othis);
                }

            });
        });

        table.on('toolbar(power-table)', function(obj){
            if(obj.event === 'add'){
                window.add();
            } else if(obj.event === 'refresh'){
                window.refresh();
            }else if(obj.event === 'expandAll'){
                treetable.expandAll("#power-table");
            } else if(obj.event === 'foldAll'){
                treetable.foldAll("#power-table");
            } else if(obj.event === 'reload'){
                treetable.reload("#power-table");
            }
        });

        //监听单元格编辑
        table.on('edit(power-table)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
            $.post("{:url('sort')}", {id: data.id,sort:value}, function (result) {
                if(result.status == 0) {
                    treetable.reload("#power-table");
                } else {
                    layer.msg(result.msg,{icon:2,time:1000});
                    treetable.reload("#power-table");
                }
            });
        });

        window.add = function(){
            layer.open({
                type: 2,
                title: '新增',
                shade: 0.1,
                area: ['450px', '500px'],
                content: '/Menu/add'
            });
        }

        window.edit = function(obj){
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: ['450px', '500px'],
                content: '/Menu/edit?id='+obj.data.id
            });
        }

        window.remove = function(obj){
            layer.confirm('确定要删除该节点以及子级节点?', {icon: 3, title:'提示'}, function(index){
                layer.close(index);
                let loading = layer.load();
                console.log(obj.data);
                $.ajax({
                    url: "/Menu/delete",
                    data:{id:obj.data.id},
                    dataType:'json',
                    type:'post',
                    success:function(result){
                        layer.close(loading);
                        if(result.status == 0){
                            layer.msg(result.msg,{icon:1,time:1000},function(){
                                obj.del();
                            });
                        }else{
                            layer.msg(result.msg,{icon:2,time:1000});
                        }
                    }
                })
            });
        }
    })
</script>
</body>
</html>